package myJs.projectCps.volcanoPlot

import com.softwaremill.quicklens._
import myJs.cps._
import myJs.tool.Tool._

import japgolly.scalajs.react.vdom.all._
import japgolly.scalajs.react._
import japgolly.scalajs.react.React.Fragment
import japgolly.scalajs.react.util.EffectCatsEffect._
import myJs.myPkg.Hooks._
import cats.effect._
import myJs.Implicits._

import scala.collection.immutable.SeqMap

/** Created by yz on 3/11/2020
 */
object LayoutCp {

  val plotO=Cp.plotO

  case class Props(
    basicData: plotO.LayoutData,
    basicDataChange: (plotO.LayoutData => plotO.LayoutData) => SyncIO[Unit]
  ){
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>

    val (varNameStr,setVarNameStr)=useState("")

    object FTool {

      def vChange[T](f: PathLazyModify[plotO.LayoutData, T])(g: String => T) = (v: String) => {
        props.basicDataChange {
          f.setTo(g(v))
        }
      }

      def strChange(f: PathLazyModify[plotO.LayoutData, String]) = FTool.vChange(f)(x=>x)

      def varNameStrChange=(v:String)=>{
        setVarNameStr(v)
      }

    }

    val showSampleMap = SeqMap("T" -> messages("yes"), "F" -> messages("no"))
    val basicData = props.basicData

    useEffect(
      {
        val curVarNames=varNameStr.split("\n").toList
        if(basicData.varNames!=curVarNames){
          setVarNameStr(
            basicData.varNames.mkString("\n")
          )
        }else SyncIO{}
      },
      List(basicData.varNames)
    )

    useEffect(
     {
        props.basicDataChange{x=>
          x.modify(_.varNames).setTo(
            varNameStr.split("\n").toList
          )
        }
      },
      List(varNameStr)
    )


    Fragment(
      SelectInlineCp.Props(
        value = basicData.showSample,
        label = "Show variable names",
        name = s"showSample",
        optionMap = showSampleMap,
        onChange = FTool.strChange(modifyLens[plotO.LayoutData](_.showSample)),
        labelWidth = 4,
        inputWidth = 4
      ).render,
      TextareaInlineCp.Props(
        show = (basicData.showSample == "T"),
        name = "varNames",
        value = varNameStr,
        onChange = FTool.varNameStrChange,
        label = "Variable names",
        inputWidth = 8,
        labelWidth = 4,
        questionInfo="Enter the variable names to draw the label,one in a row."
        //输入要绘制label的变量名，一行一个。
      ).render,
      SelectInlineCp.Props(
        show = (basicData.showSample == "T"),
        value = basicData.hasBorder,
        label = "Show border",
        name = s"hasBorder",
        optionMap = showSampleMap,
        onChange = FTool.strChange(modifyLens[plotO.LayoutData](_.hasBorder)),
        labelWidth = 4,
        inputWidth = 4
      ).render,
      BetweenInlineCp.Props(
        label = messages("picSizeWidthHeight"),
        startName = "width",
        start = basicData.width,
        startChange = FTool.strChange(modifyLens[plotO.LayoutData](_.width)),
        endName = "height",
        end = basicData.height,
        endChange = FTool.strChange(modifyLens[plotO.LayoutData](_.height))
      ).render,
    )


  }

}
